<template>
  <div>
    <form>
      <input v-model="form.name" style="margin-top: 10px;" /><br />
      <input v-model="form.age" style="margin-top: 10px;" /><br />
      <button style="margin-top: 10px;" @click.prevent="submit">提交</button>
    </form>
  </div>
  <div style="margin-top: 10px;">
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item, index) in list" :key="'index'">{{ item }}</li>
    </ul>
    <button @click="add2">添加2</button>
    <ul>
      <li v-for="(item, index) in listObj.arr" :key="'index'">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";

// ref支持所有属性 reactive引用类型Array Object Map Set
// ref取值赋值都要加.value reactive不需要
const form = reactive({ name: "小满", age: 12 });
const submit = () => {
  console.log(form);
};

// reactive proxy代理，不能直接赋值，否则会破坏响应式对象
// 数组：使用push()加结构
const list = reactive<string[]>([]);
const add = () => {
  setTimeout(() => {
    let res = ["ig", "fpx", "edg"];
    list.push(...res);
  }, 2000);
};
// 直接使用对象，将数组作为对象的属性
type M = {
  arr: string[];
};
const listObj = reactive<M>({ arr: [] });
const add2 = () => {
  setTimeout(() => {
    let res = ["ig", "fpx", "edg"];
    listObj.arr = res;
  }, 2000);
};
</script>

<style scoped></style>
